<!-- <ma-crumb>
  <ma-crumb-item ma-href="#!/components">Components 组件</ma-crumb-item>
  <ma-crumb-item ma-href="#!/components/global">Global 全局</ma-crumb-item>
  <ma-crumb-item>Font 文字</ma-crumb-item>
</ma-crumb> -->
<ma-crumb-auto></ma-crumb-auto>
<div class="navigation-menu-page">
  <div class="container"
    ma-full-container>
    <h2>Menu 菜单</h2>
    <p>为页面和功能提供导航的菜单列表。</p>

    <h3>依赖</h3>
    <div class="p">
      <a href="https://ui-router.github.io/ng1/">https://ui-router.github.io/ng1/</a>
    </div>

    <h3>代码演示</h3>
    <div class="p">
      <h4>顶部菜单 当路由只显示两级的时候使用</h4>
      <div class="clearfix header-bg mb-20">${require('./code1.html')}</div>
      <code class="mt-20 mb-20"
        ng-bind="code1Text"></code>

      <h4>顶部菜单 独立实现</h4>
      <div class="clearfix header-bg mb-20">${require('./code3.html')}</div>
      <code class="mt-20"
        ng-bind="code3Text"></code>
      <div class="mt-10">菜单配置详见 example/index.html</div>
      <div>自动生成菜单需要在 $rootScope 下赋值 routerConfig，路由配置及赋值详见 example/js/routerConfig.js 和 example/js/app.js</div>
    </div>
    <div class="p">
      <h4>侧边栏菜单</h4>
      <div class="sider-menu-box clearfix">
        ${require('./code2.html')}
      </div>
      <ma-code class="mb-20">
        <div class="right">
          <a href="https://jsfiddle.net/youpinyao/n7n3bvop/"
            target="_blank">jsfiddle</a>
        </div>
        <code>
          <div ng-bind="code2Text"></div>
          <div ng-bind="code4Js"></div>
        </code>
      </ma-code>
      <h4>侧边栏菜单 独立实现</h4>
      <div class="sider-menu-box clearfix">${require('./code4.html')}</div>
      <ma-code>
        <div class="right">
          <a href="https://jsfiddle.net/youpinyao/f5sj4xnh/"
            target="_blank">jsfiddle</a>
        </div>
        <code>.sider-menu-content.hide // 隐藏菜单模块
          <div ng-bind="code4Text"></div>
        </code>
      </ma-code>
    </div>
    <h3>API</h3>
    <div class="p">
      <table>
        <tr>
          <th>属性</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
          <th>必填</th>
        </tr>
        <tr>
          <td>ma-title</td>
          <td>设置侧边栏菜单标题</td>
          <td>String</td>
          <td>-</td>
          <td>NO</td>
        </tr>
        <tr>
          <td>ma-routers</td>
          <td>配置菜单内容</td>
          <td>Array</td>
          <td>-</td>
          <td>YES</td>
        </tr>
        <tr>
          <td>ma-toggle</td>
          <td>侧边栏菜单 - 独立实现时可使用</td>
          <td>-</td>
          <td>-</td>
          <td>NO</td>
        </tr>
      </table>
    </div>
  </div>
</div>
